<!-- src/components/AppIcon/index.vue -->

<template>
  <i class="icon" :style="{ 'background-image': `url(${iconUrl})` }" />
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
});

const iconUrl = computed(() => {
  return new URL(`/src/assets/icons/${props.name}.png`, import.meta.url).href;
});
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center / contain;
  vertical-align: middle;
}
</style>

<!-- 使用：

<AppIcon name="logo" /> -->
